<!-- 商品销售排行榜 -->
<template>
   <div class="commodity_sales_ranking">
      <div class="title">
         商品销量排行
      </div>
      <div class="head">
         <div>
            <!-- <CityInit/> -->
         </div>
         <div class="head_title" >
            <el-radio-group 
               v-model="radio" 
               size="mini"
               text-color="#6464f7"
               class="radio_el_owner"
               @input="getList"
               >
               <el-radio-button label="1">按月</el-radio-button>
               <el-radio-button label="2">按周</el-radio-button>
               <el-radio-button label="3">按天</el-radio-button>
            </el-radio-group>
            <!-- <CityInit/> -->
         </div>
      </div>
      <div class="head_center" id="commodity_echarts" v-loading="loading">

      </div>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import {
   disBillHomeSellOutCommodityQty
} from "@/api/home/commodity_sales_ranking";
export default{
   name:"dealer",
   data(){
      return{
         radio:'1',
         value:'',
         options:[
            {
               value: '选项1',
               label: '黄金糕'
            }, {
               value: '选项2',
               label: '双皮奶'
            },
         ],
         data1:[],
         titleX: [],
         time:'soldOrders',
         document_key: 'home_marketing_informations',
         searchList:[],
         loading: false
      }
   },
   methods:{
      initialize(){
         let myChart = echarts.init(document.getElementById('commodity_echarts'));
         console.log(myChart);
         let option={
            color: ['#5074f3'],
            grid:{
               left:'5%',
               top:'11%',
               bottom:'10%',
               right:'4%'
            },
            tooltip: {
               trigger: 'axis',
               axisPointer:{
                  type:'shadow'
               }
            },
            xAxis: {
               // boundaryGap: false, //设置是否挨着y轴开始
               data: this.titleX,
               axisTick: {
                  alignWithLabel: true
               },
               axisLabel: {
                  formatter: function (value) {
                     // 通过判断文字长度来决定是否需要换行
                     if (value.length > 15) {
                        // 如果长度大于5，则在第5个字符后插入换行符
                        return value.substring(0, 15) + '\n' + value.substring(15);
                     } else {
                        // 否则不做处理
                        return value;
                     }
                  }
               }
            },
            yAxis: {
               type: 'value'
            },
            series: [
               {
                  name: '销售额',
                  type: 'bar',
                  data: this.data1,
                  barWidth:'55%',
                  label: {
                     show: true,
                     position: 'top'
                  },
               },
            ]
         }

         myChart.setOption(option);

         window.addEventListener("resize", function () {
            myChart.resize();
         });
      },
      
      getList(){
         this.loading = true
         disBillHomeSellOutCommodityQty({
            dateType: this.radio
         }).then((res) => {
            
            console.log(res.data);
            // let list = []
            this.data1 = []
            this.titleX = []
            res.data.forEach((item)=>{
               this.data1.push(item.sellQty)
               this.titleX.push(item.name)
            })
            this.loading = false
            this.initialize()
         }).catch((err) => {
            this.loading = false
            this.initialize()
         });
      },
   },
   mounted(){
      this.getList()
      this.initialize()
   },
}
</script>

<style lang='less'>
.commodity_sales_ranking{
   padding:10px 20px;
   box-sizing: border-box;
   .title{
      font-weight:900;
      color: black;
      font-size: 18px;
      margin: 10px 0;
   }
   .head{
      display: flex;
      justify-content: space-between;
      
      .radio_el_owner{

         .el-radio-button{
            //从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
            .el-radio-button__inner{                               
               margin-bottom: px(5);
               background-color:#fff;
               &:hover{
                  border-color: #6464f7;

               }
               // &.is-checked {
               //    .el-radio__inner{
               //       background-color:#28D4C1;
               //       border-color:#28D4C1; 
               //       }
               // }
               // .el-radio__inner{
               //    &:hover{
               //          border-color:hsl(216, 92%, 51%);
               //    }
               // }
            }
         }
      }
      .head_title{
         display: flex;
         .radio_el_owner{
            margin-right: 10px;
         }
      }
   }
   .head_center{
      width: 100%;
      height: 360px;
   }
}
</style>